<template>
    <div class="notFound">
        <div class="backHome" @click="backHome">
            <span>返</span>
            <span>回</span>
            <span>首</span>
            <span>页</span>
            </div>
    </div>
</template>
<script>
export default {
    name:"notFound",
    data() {
        return {
            
        }
    },
    mounted() {
        window.history.pushState(null,null, document.URL);
        window.addEventListener('popstate',this.onPopState);
    },
    methods: {
        onPopState(){
            this.$router.push('/home')
        },
        backHome(){
            this.$router.push('/home')
        }
    },
    beforeDestroy() {
         window.removeEventListener('popstate',this.onPopState);
    },
}
</script>
<style scoped>
    .notFound{
        width: 100vw;
        height: 100vh;
        background: url('../../assets/404.jpg') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .backHome{
        width: 536px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        background-color: #5C9EC1;
        margin-bottom: 112px;
    }
</style>